<template>
  <div class="m-product-categroy">
    <!-- <dl class="classic">
      <dt>分类</dt>
      <dt>全部</dt>
      <dd
        v-for="(item,idx) in types"
        :key="idx">

        <div class="m-product-select">
          <dl class="tab">
            <dt>{{ item.name }}<i class="el-icon-arrow-down el-icon-caret-bottom"/></dt>
            <dd>
              <h3>{{ item.name }}</h3>
              <span
                v-for="(v,i) in item.module"
                :key="i">{{ v }}</span>
            </dd>
          </dl>
        </div>
      </dd>
    </dl> -->
    <div class="classic">
      <div class="left">
        <div class="title">分类</div>
        <div class="all">全部</div>
      </div>
      <ul class="right">
        <li v-for="(item,idx) in types"
        :key="idx">
          <div class="m-product-select">
          <dl class="tab">
            <dt>{{ item.name }}<i class="el-icon-arrow-down el-icon-caret-bottom"/></dt>
            <dd>
              <h3>{{ item.name }}</h3>
              <span
                v-for="(v,i) in item.module"
                :key="i">{{ v }}</span>
            </dd>
          </dl>
        </div>
        </li>
      </ul>
    </div>


    <div class="classic">
      <div class="left">
        <div class="title">分类</div>
        <div class="all">全部</div>
      </div>
      <ul class="right">
        <li v-for="(item,idx) in areas"
        :key="idx">
          <div class="m-product-select">
          <dl class="tab">
            <dt>{{ item.areaName }}<i class="el-icon-arrow-down el-icon-caret-bottom"/></dt>
            <dd>
              <h3>{{ item.areaName }}</h3>
              <span
                v-for="(v,i) in item.placeName"
                :key="i">{{ v }}</span>
            </dd>
          </dl>
        </div>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    // types:{
    //   type: Array,
    //   default() {
    //     return []
    //   }
    // },
    areas:{
      type: Array,
      default() {
        return []
      }
    },
  },
  computed: {
    types() {
      let menu = this.$store.state.api.menu
      let arr = []
      menu.forEach(item => {
        let newName = item.name
        let idx = newName.indexOf('/')
        if (idx > -1) {
          newName = newName.substring(0, idx - 1)
        }

        arr.push({
          name: newName,
          module: item.child[0].child
        })
      })
      return arr
    }
  }
}
</script>

<style lang="scss">
  .m-product-categroy{
    padding: 15px 20px 0;
    background: #FFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .classic{
    display: flex;
    padding-bottom: 10px;
    >dt{
      width: 80px;
      &:nth-child(2){
        border-radius: 100px;
        background: #13D1BE;
        color: #FFF;
        height: 22px;
        line-height: 22px;
        width: 40px;
        box-sizing: border-box;
        margin-right: 40px;
        text-align: center;
      }
    }
    &:nth-child(1){
      dd{
        border-bottom: 1px solid #ddd;
      }
    }
  }
</style>
